@import "_reset.scss";
$fontsize:40px;

@function potorem($w) {
    @return ($w/$fontsize)*1rem;
}

@mixin kuangao($w, $h) {
    width: potorem($w);
    height: potorem($h);
}

html,
body {
    width: 100%;
    height: 100%;
}

.footer-word {
    text-decoration: none;
    color: #8b8b8b;
}

.web {
    width: potorem(640px);
    height: 100%;
    position: relative;

    .heard {
        @include kuangao(640px, 89px);

        background-color: #b20000;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;

        // overflow: hidden;
        .navigation {
            @include kuangao(53px, 43px);


            // background-color: pink;
            .demo {
                font-size: potorem(40px);
                color: white;
            }
        }

        .logo {
            @include kuangao(264px, 39px);


            // background-color: blue;
            img {
                width: 100%;
                height: 100%;
            }

            .demo2 {
                font-size: potorem(30px);
                color: white;
                font-weight: bold;
            }
        }

        .magnifier {
            @include kuangao(43px, 43px);
            border-radius: 50%;
            border: potorem(5px) solid white;
            text-align: center;

            .demo3 {
                font-size: potorem(43px);
                color: white;
            }
        }
    }

    .footer {
        @include kuangao(640px, 97px);
        border-top: potorem(1px) solid #bbb9ba;
        background-color: #f5f5f5;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
            width: 20%;
            height: potorem(77px);
            position: relative;

            .footericon {

                height: potorem(41px);
                text-align: center;
                font-size: potorem(40px);
                color: #8b8b8b;
            }

            .footer-content {
                text-align: center;
                line-height: potorem(41px);
                font-size: potorem(18px);
                color: #8b8b8b;
            }

        }

        li:nth-child(2) {
            height: potorem(77px);

            .footericon {
                color: #b60005;
            }

            .footer-content {
                color: #b60005;
            }
        }

        li:not(:last-of-type) {
            &::after {
                content: '';
                display: block;
                @include kuangao(1px, 51px);
                background-color: #e9e9e9;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .content {
        width: potorem(640px);
        position: absolute;
        left: 0;
        top: potorem(89px);
        right: 0;
        bottom: potorem(97px);
        overflow: auto;

        .logo {
            @include kuangao(640px, 190px);
            box-sizing: border-box;
            line-height: potorem(190px);
            padding: potorem(5px) 0 potorem(9px) 0;

            img {
                width: #dddddd;
                height: potorem(176px);
            }
        }

        .company-profile {
            @include kuangao(640px, 110px);
            box-sizing: border-box;
            padding-bottom: potorem(110px);
            background-color: #f5f5f5;
            display: flex;

            div {
                @include kuangao(214px, 90px);
                background-color: #f5f5f5;
                text-align: center;
                line-height: potorem(90px);
                color: #8b8b8b;
                font-size: potorem(26px);
                border-bottom: potorem(2px) solid #dadada;

                &:hover {
                    background-color: #b20000;
                    color: #f5f5f5;
                }
            }
        }

        .synopsis {
            @include kuangao(640px, 830px);

            justify-content: space-around;
            align-items: center;
            flex-direction: column;

            .synopsis-content {
                @include kuangao(582px, 796px);
                margin: 0 auto;

                p {
                    text-indent: 2em;
                    font-size: potorem(18px);
                    line-height: potorem(28px);
                    color: #8b8b8b;
                    text-align: justify;
                    padding-top: potorem(20px);
                }
            }
        }

        .videos {
            @include kuangao(583px, 400px);
            box-sizing: border-box;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;

            img {
                @include kuangao(583px, 340px);
            }
        }

        .development-history {
            @include kuangao(582px, 631px);
            margin: 0 auto;

            .history {
                @include kuangao(582px, 81px);
                background-color: red;
                display: flex;
                justify-content: space-between;

                .history-left {
                    flex: 1.5;
                    color: white;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    p {
                        font-size: potorem(35px);
                    }
                }

                .history-center {
                    flex: 7;
                    color: white;
                    display: flex;
                    align-items: center;

                    p {
                        font-size: potorem(30px);
                        letter-spacing: potorem(1px);
                    }
                }

                .history-right {
                    flex: 1.5;
                    color: white;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    p {
                        font-size: potorem(35px);
                    }
                }
            }

            .development-time {
                @include kuangao(582px, 108px);
                display: flex;

                .development-logo {
                    @include kuangao(90px, 108px);


                    .straight-line {
                        @include kuangao(44px, 36px);

                        border-right: potorem(4px) solid #d0dbdc;
                    }

                    .circular-logo {
                        @include kuangao(90px, 36px);
                        font-size: potorem(32px);
                        color: #d0dbdc;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .circular {
                            text-align: center;
                            font-size: potorem(36px);
                        }
                    }
                }

                .development-content {
                    @include kuangao(492px, 108px);
                    display: flex;
                    align-items: center;

                    ul {
                        @include kuangao(492px, 53px);

                        li:first-child {
                            font-size: potorem(32px);
                            color: #313131;
                        }

                        li:last-child {
                            font-size: potorem(20px);
                            color: #b20000;
                        }
                    }
                }
            }

            .development-time2 {
                @include kuangao(582px, 108px);
                background-color: #f3f3f3;
                display: flex;

                .development-logo {
                    @include kuangao(90px, 108px);

                    .straight-line {
                        @include kuangao(44px, 36px);
                        border-right: potorem(4px) solid #d0dbdc;
                    }

                    .circular-logo {
                        @include kuangao(90px, 36px);
                        font-size: potorem(32px);
                        color: #b20000;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .circular {
                            text-align: center;
                            font-size: potorem(36px);
                        }
                    }
                }

                .development-content {
                    @include kuangao(492px, 108px);
                    display: flex;
                    align-items: center;

                    ul {
                        @include kuangao(492px, 53px);

                        li:first-child {
                            font-size: potorem(32px);
                            color: #313131;
                        }

                        li:last-child {
                            font-size: potorem(20px);
                            color: #b20000;
                        }
                    }
                }
            }
        }

        .load-more {
            @include kuangao(583px, 57px);
            margin: 0 auto;
            // background-color: pink;
            border-top: potorem(3px) solid #dddddd;
            font-size: potorem(22px);
            letter-spacing: 1px;
            color: #bbbbbb;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}